<template>
    <div>
       
          <div class="tabs">
        <div v-for="(tab, index) in listTap" :key="index" class="tab" :class="{ active: currentIndex === index }"
          @click="tabClick(tab, index)">
          {{ tab }}
        </div>
      </div>

         <dl @click="doctorList(item)" v-for="(item, index) in ListData" :key="index">
        <dt>
          <img :src="item.doctorimage" alt=""
            style="width: 60px;height: 60px;border-radius: 50px;border: 1px solid #000;">
        </dt>
        <dd>
          <div class="doctor">
            <h3>{{ item.doctorname }}</h3>
            <p>主治医师</p>
            <span>{{ item.socolv }}</span>
          </div>
          <div class="van-ellipsis" style="line-height: 30px;">{{ item.doctorcity }}{{ item.doctorstate
            }}&ensp;{{
              item.doctoradministre }}
          </div>
          <div class="button">
            <van-button size="mini"
              style="background: rgb(231, 240, 255); color: rgb( 30, 112, 255);border: none;">图片资讯</van-button>
            <van-button style="background: rgb(228, 247, 242); color: rgb( 45, 185, 139);border: none;"
              size="mini">电话咨询</van-button>
          </div>
          <div class="main-con">
            <!-- @vue-ignore -->
            <van-text-ellipsis rows="2" :content="text" style="font-size: 14px;">
              <template #action="{ expanded }">{{ expanded ? ' V' : '^' }} </template>
            </van-text-ellipsis>
          </div>
          <div class="classitem">
            <div class="divitem">
              <p>好评率</p>
              <span>{{ item.doctorgood }}%</span>
            </div>
            <div class="divitem">
              <p>锦旗</p>
              <span>{{ item.doctoradmin }}</span>
            </div>
            <div class="divitem">
              <p>浏览人数</p>
              <span>{{ item.doctorbrowse }}</span>
            </div>
          </div>
          <div class="money">
            <div class="moneyitem">
              <span>￥</span>
              <p>{{ item.doctorprice }}</p>
              <span>起</span>
            </div>
            <van-button style="background-color:rgb(30, 111, 255) ;color: #fff;" size="small" @click="dian">问医生</van-button>
          </div>
        </dd>
      </dl>





    </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue"
import { useRouter } from "vue-router";
import axios from "axios"
// @ts-ignore
import type { ListDatagete } from '@/Type/indeType';
const router=useRouter()
const currentIndex = ref(0);
const ListData = ref<ListDatagete[]>([])
const tapslist = ref('')
const dian =()=>{
    router.push('/specialists')
}
const pageCode = ref(1)
const pageSize = ref(2)

const listTap = ref([
    '我关注的医生',
  '服务过我的医生'

 
])

const tabClick = (tab: string, index: number) => {
  currentIndex.value = index
  tapslist.value = tab
  getData()
}
const getData = () => {
  console.log(111);
  axios.get('/api/doctor/list', { params: { pageCode: pageCode.value, pageSize: pageSize.value, admin: tapslist.value } }).then(res => {
    ListData.value = res.data.data
    console.log(res.data.data);
  })
}
getData()
const doctorList = (item: ListDatagete) => {
  axios.post('/api/doctor/browse', { id: item.doctorid })

}
</script>


<style lang="scss" scoped>
.tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px;
    text-align: center;
  }

  .tab {
    padding: 10px;
    margin-left: 10px;



  }

  .active {
    background-color: rgb(30, 112, 255);
      
    color: #fff;
  }
dl {
    border-bottom: 1px solid #ccc;
    display: flex;
    padding: 5px;

    .doctor {
      display: flex;
      align-items: center;

      p {
        padding: 10px;
      }

      span {
        font-size: 8px;
        background-color: rgb(1, 180, 136);
        color: #fff;
        padding: 2px;
        border-radius: 2px;
      }
    }
  }

   .classitem {
        font-size: 12px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 5px;
        align-items: center;

        .divitem:last-child {
          border-right: none;
        }

        .divitem {
          width: 33%;
          display: flex;
          height: 20px;
          align-items: center;
          text-align: center;
          border-right: 1px solid #ccc;
          font-size: 10px;

          span {
            color: rgb(250, 100, 0);
            margin-left: 3px;

          }
        }
      }

      .money {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .moneyitem {
          display: flex;
          align-items: center;

          span {
            font-size: 12px;
            color: rgb(250, 100, 0);
          }

          p {
            font-size: 20px;
            color: rgb(250, 100, 0);
            padding: 3px;
          }

          span:last-child {
            color: rgb(89, 89, 89);
          }
        }
      }
</style>